<template>
  <div class="cont">
    <div>
      <el-page-header @back="goBack" content="返回首页"> </el-page-header>
    </div>
    <div style="margin-top: 2%">
      <el-collapse class="coll" v-model="activeNames" @change="handleChange">
        <el-collapse-item title="学习方向" name="1">
          <div>增加学习方式，增强学习方式，改进学习方式</div>
          <div>三人行必有我师，快乐最重要</div>
          <div>
            跟着老外学英语，他们这么教他们的孩子这么学英语，我们也这么学
          </div>
        </el-collapse-item>
        <el-collapse-item title="学习资料" name="2">
          <div>
            <el-link type="primary">单词表</el-link>
          </div>
          <div><el-link type="primary">语法练习</el-link></div>
          <div><el-link type="primary">口语表达</el-link></div>
          <div><el-link type="primary">书面表达</el-link></div>
        </el-collapse-item>
        <el-collapse-item title="联系方式" name="3">
          <div>v:gotogames</div>
          <div>QQ:00</div>
          <div>电话：忘记了</div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
<script>
import router from "@/router";
export default {
  data() {
    return {
      activeNames: ["1"],
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    goBack() {
      router.push("/");
    },
  },
};
</script>
<style scoped>
.cont {
  height: 930px;
  display: flex;

  justify-content: center; /* 水平居中 */
  background-color: rgb(243, 220, 220);
  flex-wrap: wrap;
}
.mess {
  margin-right: 80%;
  margin-top: 10px;
}
.coll {
  width: 960px;
  background-color: rgb(243, 220, 220);
}
</style>
